<template>
  <div  class="index">
    <el-container class="menuContent">
      <el-main class="mainSection">
        <component :is="overList" :key='indexKey' ref="child"/>
        <!-- <Power ref="child"></Power> -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
import $ from 'jquery';
import OverSet from "../components/overview/setOverview";
import Nav from "../components/index/navbar"
import Ac from "../components/overview/ac";
import Cleanbox from "../components/overview/cleanbox";
import Airclean from "../components/overview/airclean";
import Mouse from "../components/overview/mouse";
import Xtg401 from "../components/overview/xtg401";
import Temp from "../components/overview/tempW";
import Xtg403 from "../components/overview/xtg403";
import K8s from "../components/overview/k8s";
import Cleantable from "../components/overview/cleantable";
import Airfilter from "../components/overview/airfilter";
import Normal from "../components/overview/normal";
import Humi from "../components/overview/humi";
import HumiA from "../components/overview/humia";
import Deac from "../components/overview/deac";
import Shipin from "../components/overview/shipin";
import Tablebox from "../components/overview/table";
import Airlite from "../components/overview/airlite";
import Filterlite from "../components/overview/filterlite";
import Irf818 from "../components/overview/irf818";
import K8s_501 from "../components/overview/crk_s6";
import Light from "../components/overview/light";
import Disinfect from "../components/overview/disinfect";
import Wind from "../components/overview/wind";
import Power from "../components/overview/power";

export default {
  components: {OverSet, Ac, Nav, Cleanbox,Airfilter, Mouse, Temp,Xtg401, Xtg403,
              K8s, Cleantable, Airclean, Tablebox, Normal, Humi, HumiA, Deac, Shipin,Airlite,Filterlite,Irf818,K8s_501,Light,Disinfect,Wind,Power},
  inject: ['reload'],
  data() {
    return {
      overList: "",
      indexKey:0,
      number: 0,
      timeGetData:'',//计时定时器
      timeGetData2:'',
      changedata:0,
      url:'',
      sidemenu : [
      {
            typename:'',//空调遥控器
            type:1,
            backName:"irf818",
            icon: '#icon-jiejingji-copy'
        },
        
        {
            typename:'恒湿机120/120s',
            type:2,
            backName:'humi',
            icon: '#icon-lishikongtiao'
        },{
            typename:'恒湿机120a',
            type:3,
            backName:'humiA',
            icon: '#icon-lishikongtiao'
        },
        {
            typename:'霉菌机',
            type:4,
            backName:"airclean",
            icon: '#icon-mokuai'
        },
        {
            typename:'新风机',
            type:5,
            backName:"airfilter",
            icon: '#icon-xinfeng1'
        },
        {
            typename:'驱鼠器',
            type:6,
            backName:"mouse",
            icon: '#icon-laoshu'
        },
        {
            typename:'净化整理台',
            type:7,
            backName:"cleantable",
            icon: '#icon-dianshigui1'
        },
        {
            typename:'整理台',
            type:8,
            backName:"Tablebox",
            icon: '#icon-zhenglitai'
        },
        {
            typename:'净化柜',
            type:9,
            backName:"cleanbox",
            icon: '#icon-icon_airconditioning-copy'
        },
        {
            typename:'除酸机',
            type:10,
            backName:"deac",
            icon: '#icon-lishikongtiao'
        },{
            typename:'灯光门禁控制器',
            type:11,
            backName:"light",
            icon: '#icon-shebeileishebei44'
        },
        {
            typename:'RFID风淋通道',
            type:12,
            backName:"wind",
            icon: '#icon-tongdao'
        },
        {
            typename:'智能排水站',
            type:13,
            backName:"water",
            icon: '#icon-shuichang'
        },
        {
            typename:'净化舱',
            type:14,
            backName:"disinfect",
            icon: '#icon-armoire'
        },
        {
            typename: '红外主机',
            type: 15,
            backName:'infrared',//跳转路径
            icon: '#icon-duanluqigui'
        },
        {
            typename: '通用模块',
            type: 16,
            backName:'normal',//跳转路径
            icon: '#icon-duanluqigui'
        },
        {
            typename:'',//简版/云测仪
            type:17,
            backName:'k8s',
            icon: '#icon-huanjingjiance'
        },
        {
            typename: '空调',
            type: 18,
            backName:'ac',//跳转路径
            icon: '#icon-kongtiao1'
        },
        {
            typename:'温湿度(T100)',
            type:19,
            backName:'temp',
            icon: '#icon-icon_wenshidutanceqi'
        },
        {
            typename:'空气监测(外置)',
            type:20,
            backName:"k8s_501",
            icon: '#icon-huanjingjiance'
        },
        {
            typename:'继电器输出',
            type:22,
            backName:'xtg402',
            icon: '#icon-jiedian'
        },               
        {
            typename:'干接点监测',
            type:23,
            icon: '#icon-jiedian', 
            backName:'xtg403'
        },
        {
            typename:'电源管理箱',
            type:24,
            backName:'power',
            icon: '#icon-shebeizhuangtai'
        }, {
            typename:'数据采集器',
            type:25,
            backName:'xtg401',
            icon: '#icon-jiedian'
        },
      ],
      extractedInfo: []
    };
  },
  computed: {
  },
  created() {
    this.extractedInfo = JSON.parse(localStorage.getItem("6.0展示设备卡片"))
    this.getData()
  },
  methods: {
    getData(){
      this.extractedInfo
      this.overList = ''
      for(var a = 0; a < this.sidemenu.length; a++){
        if(this.sidemenu[a].type == this.extractedInfo.type){
          this.overList = this.sidemenu[a].backName
        }
      }
      console.log(this.overList)
      // this.$refs.child.getData(val)
    }
    // this.change(JSON.parse(localStorage.getItem('当前设备编号')), 0) //自动定位上次点击的设备
    // this.$refs.child.getData(val)
    // change(val, index) {
    //   localStorage.setItem("当前设备编号", JSON.stringify(val))
    //   if(this.$refs.child == undefined){
    //     this.timeGetData2 = setInterval(() => {
    //       this.changedata++
    //       if(this.changedata > 1000){
    //         this.$message({
    //           message: '网络访问失败',
    //           type: 'error',
    //           duration: 2000
    //         });
    //         this.changedata = 0
    //         clearInterval(this.timeGetData2)
    //         this.timeGetData2 = null;
    //       }else{
    //         if(this.$refs.child == undefined){ 
    //         }else{
    //           clearInterval(this.timeGetData2)
    //           this.timeGetData2 = null;
    //           this.changedata = 0
    //           this.indexKey++;
    //           this.$refs.child.getData(val)
    //         }
    //       }
    //     }, 10);
    //   }else{
    //     this.indexKey++;
    //     this.$refs.child.getData(val)
    //     // this.$refs.child.getHisData(val)
    //   }
    //   this.number = index;  
    // },
  },
   // 清除定时器
   beforeDestroy() {
      clearInterval(this.timeGetData);
      this.timeGetData = null;
      clearInterval(this.timeGetData2)
      this.timeGetData2 = null;
  }
};
</script>

<style scoped>
.el-container {
  width: 100%;
}
.menuContent {
  color: #fff;
}
.menuContent ul li {
  width: 50%;
  float: left;
  list-style: none;
  height: 100px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid rgba(89, 129, 165, 0.6);
}
.menuContent ul li.active {
  background: rgba(89, 129, 165, 0.6);
}
.menuContent ul li .icon {
  font-size: 26px;
  margin-bottom: 4px;
  margin-top: 25px;
}
.aside {
  box-sizing: border-box;
  border: 1px solid rgba(89, 129, 165, 0.6);
}
.menuContent ul li:nth-child(odd) {
  box-sizing: border-box;
  border-right: 1px solid rgba(89, 129, 165, 0.6);
}
/* @media (any-hover: hover) {
  .menuContent ul li:hover {
    cursor: pointer;
    background: rgba(89, 129, 165, 0.6);
    transition: all 0.4s;
  }
} */
.menuContent ul li:hover {
    cursor: pointer;
  }
.aside {
  position: relative;
  background: rgba(89, 129, 165, 0.2);
  height:990px;
  overflow: hidden;
}
.aside span:nth-child(1) {
  position: absolute;
  left: 0px;
  top: 0px;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 1px 0 0 1px;
}
.aside span:nth-child(2) {
  position: absolute;
  right: 0;
  top: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 1px 1px 0 0;
}
.aside span:nth-child(3) {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 0 1px 1px 0;
}
.aside span:nth-child(4) {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 6px;
  border-style: solid;
  border-color: #42a3ca;
  border-width: 0 0 1px 1px;
}
.mainSection{
    position: relative;
    border: 1px solid rgba(89, 129, 165, 0.8);
    margin: 20px 0px 0px 15px;
    height: 990px;
    background:  rgba(89, 129, 165, 0.2);
    overflow: hidden;
}
/deep/ .el-dialog .el-dialog__title{
  color: #fff !important;
}
.overSetBut{
  background: rgba(89, 129, 165, 0.6);
  border: 1px solid rgba(89, 129, 165, 0.6);
  color: #fff;
  position: absolute;
  right: 30px;
  top: 29px;
  z-index: 999;
}
/deep/ .el-dialog{
  margin-top: 2vh !important;
  height: 94%;
}
/deep/ .el-dialog__body{
    height: 94% !important;
}
/* .overviewSetModel{
  
} */
@media (any-hover: hover) {
  .el-button:focus, .el-button:hover {
      color: #409eff;
      border: 1px solid rgba(89, 129, 165, 0.6);
      background: rgba(89, 129, 165, 0.6);
  }
}
/deep/ .el-dialog__headerbtn .el-dialog__close {
    color: #fff !important;
}
/* .overview_zlist_sy{
  height: 960px;
} */
.overview_zlist{
  display: inline-block;height: 990px;overflow-y: scroll; width:100%;padding-bottom:50px;transition: opacity 1s;
}
/* 子级菜单框 */
.overview_list_bk{
  position: absolute;
  width: 100%;
  height: 990px;
  background: rgba(89, 129, 165, 0.1);
  z-index: 999;
  left: 0;
  top: 1000px;
  transition: top 1s;
  /* display: none; */
}
.sbimg{
  height: 100px;
  margin-top: 10px;
}
.sbimg img{
  height: 100%;
}
.overview_list_close{
  height: 205px;
  width: 100%;
  padding-top: 5px;
  text-align: center;
  border-bottom: 1px solid #fff;
  color: #98d7ff;
  font-weight: bold;
  background: rgba(89, 129, 165, 0.3);
  cursor: pointer;
}
.overview_list_close2{
  height: 100px;
}
.overview_list_closecon{
  width: 100%;
  margin-top: 5px;
}
.overview_list_close2 .overview_list_closecon{
  margin-top: 15px;
}
.list_icon{
  transition:font-size .5s;
  font-size: 30px;
}
.overview_list_close:hover .list_icon{
  font-size: 35px;
  color: #98d7ff;
}
.overview_list_title{
  font-size: 18px;
  padding-top: 20px;
}
.view_icon{
  font-size: 22px;
}
.overview_list_control{
  height: 847px;
  overflow-y: scroll;
}

.overview_list_dev{
  width: 100%;
  height: 65px;
  padding: 0px 30px;
  padding-top: 20px;
  cursor: pointer;
  transition:background-color 0.5s;
}
.active{
  color:#98d7ff;
}
.overview_list_dev:last-child{
  border-bottom: 1px solid #fff;
}
.overview_list_dev:hover{
  background-color: rgba(89, 129, 165, 0.2);
}
.overview_list_dev p{
  width: 100%;
  padding: 0px 5px;
  overflow: hidden;
}
.overview_list_dev_line{
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  border-bottom: 1px dashed #fff;
}
.overview_list_dev:last-child .overview_list_dev_line{
  border-bottom: none;
}

</style>